<template>
  <div>
    <p>
      {{ count }} &nbsp;&nbsp;
      <button @click="count++">+1</button>
    </p>
    <p>
      {{ person }}
    </p>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const count = ref(20)
const person = reactive({
  name: '李虎',
  age: 24,
  address: { provice: '江西', city: '赣州' }
})

/* 监听普通数据类型 */
const watchCount = watch(count, val => {
  console.log(val)
})
// 监听整个对象
// watch(person, val => {
//   console.log(val)
// })

// 监听对象中的第一层某个属性
// const one = watch(
//   () => person.name,
//   val => {
//     console.log(val)
//   }
// )

// 监听对象中的第一层的某个属性，但是它的值是引用类型
watch(
  () => person.address,
  val => {
    console.log(val)
  },
  {
    deep: true,
    immediate: true // 立即执行
  }
)
</script>

<style scoped></style>
